<template>
    <div class="collect">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
            <van-nav-bar
                title="我的收藏"
                class="navbar"
            />
        </div>
        <div class="list">
            <ul class="list-items">
                <div
                    class="list-item"
                    v-for="(val, index) in list"
                    :key="index"
                    @click="toGoods(val.id)"
                >
                    <img :src="val.list_pic_url" alt="">
                    <p>{{val.name}}</p>
                    <p>￥{{val.retail_price}}</p>
                </div>
                <div class="list-item moreGoods">
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
import { addCollectInfo, getCollectListInfo } from '@/api/my/collect/index'

    export default {
        data() {
            return {
                openId: localStorage.getItem('openId'),
                list: []
            }
        },
        methods: {
            // 返回
            onClickLeft() {
                this.$router.go(-1);
            },
            // 商品详情跳转
            toGoods(id) {
                this.$router.push( { path: '/pages/goods', query: { id, } } )
            },
        },
        created() {
            // 获取收藏列表
            getCollectListInfo({openId: this.openId})
            .then(res => {
                this.list = res.collectGoodsList;
            })
        },
    }
</script>

<style lang="scss" scoped>
    .collect{
        width: 100%;
        height: 100vh;
        background: #f4f4f4;
        .header{
            background: #fff;
        }
        .list{
            width: 100%;
            margin-top: 5px;
            .list-items{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                .list-item{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin-bottom: 6px;
                    width: 180px;
                    background: #fff;
                    img{
                        width: 151px;
                        height: 151px;
                    }
                    p{
                        width: 180px;
                        margin: 0 0 12px 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p:last-child {
                        color: #9c3232;
                    }
                }
                .moreGoods{
                    height: 0;
                }
            }
        }
    }
</style>
<style scoped>
    .navbar>>> .van-ellipsis{
        font-weight: bold;
        font-size: 18px;
    }
</style>
